<template>
    <div class="home-recommond">
        <div class="wrapper" ref="wrapper">
           <ul class="content" ref="content">
              <li v-for="(item,index) in listData" :key="index"
               @click="selectItem(item)">
                 <div class="cover">
                    <van-image :src="item.cover" radius="1rem"/>
                    <span>{{item.listen_num | numFilter(1)}}万</span>
                 </div>
                    <span>{{item.title}}</span>
             </li>
         </ul>
        </div>
    </div>
</template>

<script>
import{betterScrollHorizontal} from '../../common/betterScroll.js';
export default {
    data(){
        return{
            listData:[]
        }
    },

    created(){
        this.getSongListData()
    },

    methods:{
        //获取到推荐歌单的数据
        getSongListData(){
            this.$request('get','/recommend/playlist/u')
            .then(res=>{
                console.log(res)
                if(res.result == 100){
                    this.listData = res.data.list;
                }
                betterScrollHorizontal(
                    this,
                    this.$refs.wrapper,
                    this.$refs.content,
                    this.listData.length,
                    10
                );
            });
          },
        
                  //列表下的单击事件
        selectItem(item){
           const id = item.content_id;//获取到歌单的id
        //    console.log(id);
        //    this.$router.push({
        //      name:"singlist",
        //      params:{
        //         id:id
        //         }
        //     })
        this.$router.push({path:`/singlist/${id}`})
        }
    },
            

    
    filters:{
        numFilter(value,num){
            return parseFloat(value/10000).toFixed(num)
        },
      },
    };
</script>

<style scoped>

    .cover > span {
        position: absolute;
        right: 0.2rem;
        bottom: 0.4rem;
        background-color: #a6a0a0;
        color: white;
        font-size: 14px;
        border-radius: 1rem;
        width: 5rem;
        display: inline-block;
    }

    .cover{
        position: relative;
    }

    .wrapper{
        width: 100%;
        overflow: hidden;
    }

    /* .content{
        width: calc(12 * 10rem);
    } */

    ul.content li {
        display: inline-block;
        width: 10rem;
        vertical-align: top;
    }

    ul.content li * {
        margin: 0.1rem;
    }

     ul.content li > span {
        font-size: 0.8rem;
        color: #54493b;
    }

</style>